<template>
	<el-row :gutter="40" class="panel-group">
		<el-col :xs="12" :sm="12" :lg="7" class="card-panel-col">
			<div class="card-panel">
				<div class="card-panel-icon-wrapper icon-people">
					<i class="el-icon-edit-outline" style="font-size: 40px;"></i>
				</div>
				<div class="card-panel-description" style="margin-left: 10px;">
					<div class="card-panel-text">
						待处理
					</div>
					<div class="numClass">
						<count-to :start-val="0" :end-val="taskCount.todo" class="card-panel-num" />
					</div>

				</div>
				<div style="float: left;margin-top: 20px;">
					<el-divider direction="vertical"></el-divider>
				</div>
				<div class="card-panel-description">
					<div class="card-panel-text">
						我发起的
					</div>
					<div class="numClass">
						<count-to :start-val="0" :end-val="taskCount.draft" class="card-panel-num" />
					</div>

				</div>
				<div style="float: left;margin-top: 20px;">
					<el-divider direction="vertical"></el-divider>
				</div>
				<div class="card-panel-description">
					<div class="card-panel-text">
						我处理的
					</div>
					<div class="numClass">
						<count-to :start-val="0" :end-val="taskCount.done" class="card-panel-num" />
					</div>
				</div>
			</div>
		</el-col>
		<el-col :xs="12" :sm="12" :lg="17" class="card-panel-col">
			<div class="card-panel">
				<div class="card-panel-icon-wrapper icon-people">
					<i class="el-icon-notebook-2" style="font-size: 40px;"></i>
				</div>
				<div v-for="(item,index) in flowList">
					<div class="card-panel-description" style="margin-left: 10px;">
						<div v-if="index<9">
							<div class="card-panel-text">
								{{item.flowName}}
							</div>
							<div class="numClass">
								<count-to :start-val="0" :end-val="item.num" class="card-panel-num" />
							</div>
						</div>
					</div>
					<div v-if="index < flowList.length -1 && index< 8 " style="float: left;margin-top: 20px;">
						<el-divider direction="vertical"></el-divider>
					</div>
				</div>
			</div>
		</el-col>
	</el-row>
</template>

<script>
	import CountTo from 'vue-count-to'
	import request from '@/utils/request'
	export default {
		components: {
			CountTo
		},
		data() {
			return {
				// 任务统计相关数据
				taskCount: {
					todo: 0,
					done: 0,
					draft: 0,
				},
				// 流程数据相关数据
				flowList: [],
				imitateList:[
					{
						flowKey: "001",
						flowName: "出差流程",
						num:0
					},
					{
						flowKey: "002",
						flowName: "请假流程",
						num:20
					},
					{
						flowKey: "003",
						flowName: "报销流程",
						num:15
					},
					{
						flowKey: "004",
						flowName: "入职流程",
						num:152
					},
					{
						flowKey: "005",
						flowName: "体检流程",
						num: 28
					},
					{
						flowKey: "006",
						flowName: "开发流程",
						num: 25
					},
					{
						flowKey: "007",
						flowName: "回访流程",
						num: 65
					},
					{
						flowKey: "008",
						flowName: "上分流程",
						num: 65
					}
				]
			}
		},
		//页面初始化加载
		created() {
			this.queryTaskCount();
			this.groupFlowByKey();
		},
		methods: {

			queryTaskCount() {
				let _this = this;
				request({
					url: '/flowable/workflow/taskCount',
					method: 'post',
					data: {}
				}).then(response => {
					_this.taskCount = response.data;
				})
			},
			groupFlowByKey() {
				let _this = this;
				request({
					url: '/flowable/workflow/groupFlowByKey',
					method: 'post',
					data: {}
				}).then(response => {
					_this.flowList = response.data;

					if(_this.flowList.length < 7){
						_this.flowList =[..._this.flowList, ..._this.imitateList]
					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.numClass {
		width: 100%;
		text-align: center;
	}

	.panel-group {
		padding-top: 20px;
		padding-left: 20px;
		padding-right: 20px;
		.card-panel-col {
			margin-bottom: 32px;
		}

		.card-panel {
			height: 108px;
			cursor: pointer;
			font-size: 12px;
			position: relative;
			overflow: hidden;
			color: #666;
			background: #fff;
			box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
			border-color: rgba(0, 0, 0, .05);

			&:hover {
				.card-panel-icon-wrapper {
					color: #fff;
				}

				.icon-people {
					background: #40c9c6;
				}

				.icon-message {
					background: #36a3f7;
				}

				.icon-money {
					background: #f4516c;
				}

				.icon-shopping {
					background: #34bfa3
				}
			}

			.icon-people {
				color: #36a3f7;
			}

			.icon-message {
				color: #36a3f7;
			}

			.icon-money {
				color: #f4516c;
			}

			.icon-shopping {
				color: #36a3f7
			}

			.card-panel-icon-wrapper {
				float: left;
				margin: 14px 0 0 14px;
				padding: 16px;
				transition: all 0.38s ease-out;
				border-radius: 6px;
			}

			.card-panel-icon {
				float: left;
				font-size: 48px;
			}

			.card-panel-description {
				float: left;
				font-weight: bold;
				margin: 26px;
				margin-left: 0px;

				.card-panel-text {
					line-height: 18px;
					color: rgba(0, 0, 0, 0.45);
					font-size: 16px;
					margin-bottom: 12px;
				}

				.card-panel-num {
					color: #36a3f7;
					font-size: 20px;
				}
			}
		}
	}

	@media (max-width:550px) {
		.card-panel-description {
			display: none;
		}

		.card-panel-icon-wrapper {
			float: none !important;
			width: 100%;
			height: 100%;
			margin: 0 !important;

			.svg-icon {
				display: block;
				margin: 14px auto !important;
				float: none !important;
			}
		}
	}

	.el-divider--vertical {
		height: 5em;
	}
</style>
